<!--
 @Author: libing/makeup1122
 @Email: makeup1123@163.com
 @Date: "2020-03-11 16:32:17"
-->
<template>
  <v-menu v-model="menu" :close-on-content-click="false" :offset-x="true"  transition="slide-x-transition" top>
    <template v-slot:activator="{ on }">
      <v-btn v-on="on" color="info" :text="text" :icon="icon" :large="large"><v-icon>zoom_in</v-icon>预览</v-btn>
    </template>
    <v-card>
      <v-card-title>消息预览</v-card-title>
      <v-card-subtitle>指定的微信号用户</v-card-subtitle>
        <v-card-text>
          <v-form ref="preview">
            <v-text-field
              label="输入微信账号"
              v-model="wxname"
              name="wxname"
              prepend-icon="person"
              v-validate="'required'"
              :error-messages="errors.collect('wxname')"
              data-vv-as="微信账号"
              required/>
            </v-form>
          </v-card-text>
        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn @click="previewHandle" color="info">确定</v-btn>
          <v-btn @click="menu = false">取消</v-btn>
        </v-card-actions>
      </v-card>
  </v-menu>
</template>
<script>
import { preview } from '@/api/admin/wx-broadcast.js'
export default {
  name: 'WxMaterialPreview',
  components: {},
  props: {
    media_id: {
      type: String,
      default: null
    },
    content: {
      type: String,
      default: null
    },
    type: {
      type: String,
      required: true
    },
    text: {
      type: Boolean,
      default: false
    },
    icon: {
      type: Boolean,
      default: false
    },
    large: {
      type: Boolean,
      default: false
    }
  },
  data: function () {
    return {
      menu: false,
      wxname: ''
    }
  },
  created: function () {
  },
  computed: {},
  methods: {
    previewHandle() {
      if (this.type === 'text' && !this.content) {
        this.$toasted.error('请填写文本内容！')
      } else if (this.type !== 'text' && !this.media_id) {
        this.$toasted.error('请先选择素材！')
      } else {
        this.$validator.validate().then(result => {
          if (result) {
            const to = this.type === 'text' ? this.content : this.media_id
            preview(to, this.wxname, this.type).then(res => {
              this.$toasted.success(res)
            }).finally(() => {
              this.menu = false
            })
          }
        })
      }
    }
  }
}
</script>
<style scoped>
</style>
